<template>
  <div>
    <template>
      <el-select v-model="to_term"
                 @change="load()"
                 class="input3"
                 clearable
                 style="width: 200px;"
                 placeholder="学期">
        <el-option v-for="item in termOption"
                   :key="item.semesterId"
                   :label="item.term"
                   :value="item.term">
        </el-option>
      </el-select>
    </template>&nbsp;
    <div style="margin-top: 8px; margin-bottom: 15px"></div>
    <div class="big">
      <el-table :data="tableData"
                :span-method="objectSpanMethod"
                :row-style="{ color: 'darkorange', height: '60px' }"
                fit
                style="width: 100%">
        <el-table-column label="星期"
                         prop="weekdayString"></el-table-column>
        <el-table-column label="实验室"
                         prop="lab.labName"></el-table-column>
        <el-table-column label="机房"
                         prop="lab.labId"></el-table-column>
        <el-table-column label="1~2"
                         prop="strings[0]"></el-table-column>
        <el-table-column label="3~5"
                         prop="strings[1]"></el-table-column>
        <el-table-column label="6~7"
                         prop="strings[2]"></el-table-column>
        <el-table-column label="8~9"
                         prop="strings[3]"></el-table-column>
        <el-table-column label="10~12"
                         prop="strings[4]"></el-table-column>
        <el-table-column label="13~15"
                         prop="strings[5]"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState(["user", "term", "token"]),
  data () {
    return {
      termOption: '',
      tableData: [],
      to_term: '',
      total: 0,
      cellList: [],
      cellList2: [],
      count: null,
    };
  },
  methods: {
    computeCell () {
      this.cellList.length = 0
      this.cellList2.length = 0
      for (let i in this.tableData) {
        if (i == 0) {
          this.cellList.push(1);
          this.count = 0;
        } else {
          if (this.tableData[i].weekday !== null && this.tableData[i].weekday == this.tableData[i - 1].weekday) {
            this.cellList[this.count] += 1;
            this.cellList.push(0);
          } else {
            this.cellList.push(1);
            this.count = i;
          }
        }
      }
      for (let i in this.tableData) {
        if (i == 0) {
          this.cellList2.push(1);
          this.count = 0;
        } else {
          if (this.tableData[i].weekday == this.tableData[i - 1].weekday && this.tableData[i].lab !== null && this.tableData[i - 1].lab !== null && (this.tableData[i].lab.labName == this.tableData[i - 1].lab.labName)) {
            this.cellList2[this.count] += 1;
            this.cellList2.push(0);
          } else {
            this.cellList2.push(1);
            this.count = i;
          }
        }
      }
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const rowCell = this.cellList[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 1) {
        const rowCell = this.cellList2[rowIndex];
        if (rowCell > 0) {
          const colCell = 1;
          return {
            rowspan: rowCell,
            colspan: colCell,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },


    async load () {
      await this.$http.get("/arrange/clazz",
        {
          headers: { 'userId': this.token }
        },
        {
          params: {
            term: this.to_term
          }
        }).then((res) => {
          if (!res.data.success) { this.$message(res.data.errorMsg) }
          this.tableData = res.data.data;
          this.total = res.data.total
        });
      this.computeCell();
    },
  },
  created () {
    this.to_term = this.term
    this.$http.post("/semester/1", {}).then((res) => {
      if (!res.data.success) { this.$message(res.data.errorMsg) }
      else { this.termOption = res.data.data }
    })
    this.load();
  },
};
</script>


<style scoped>
.input3 /deep/ .el-input__inner {
  margin-right: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 200px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 100px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;
}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
::v-deep .el-table .cell {
  white-space: pre-line;
}
</style>